
<template>
    <a-card :bordered="false">
        <a-tabs
                defaultActiveKey="2"
                tabPosition="right"
        >
            <a-tab-pane tab="时刻表" key="1">
                <a-row :gutter="24">
                    <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                        <a-card>
                            <a-calendar
                                    :fullscreen="true"
                                    :validRange="[__momentInstance(), __momentInstance('2020-12-31')]"
                                    @change="refreshMonthTimetable"
                                    @select="clickDateCallback"
                            >
                                <template slot="dateCellRender" slot-scope="value">
                                    <div :style="{fontSize: '12px', color: item.color}" v-for="item in getDateList(value)" :key="item.ID">{{item.content}}</div>
                                </template>
                                <template slot="monthCellRender" slot-scope="value">
                                    <div v-if="getMonthData(value)" class="notes-month">
                                        <section>{{getMonthData(value)}}</section>
                                        <span>Backlog number</span>
                                    </div>
                                </template>
                            </a-calendar>
                        </a-card>
                    </a-col>
                </a-row>
            </a-tab-pane>
            <a-tab-pane tab="时间轴" key="2">
                <a-timeline style="margin: 15px" mode="alternate">
                    <a-timeline-item :color="__getTimeItemColor(index)" v-for="(ts, index) in timetableList" :key="ts.ID">
                        <a-icon slot="dot" v-if="__getTimeItemColor(index) == 'green'" type="clock-circle-o" style="font-size: 16px;" />
                        <h3 :style="{color: __getTimeItemColor(index)}">{{index.substring(1)}} 号</h3>
                        <p v-for="t in ts" style="font-size: 12px">
                            <span :style="{color: t.color}">{{t.S_LABEL}} => {{t.P_LABEL}} / 《{{t.C_LABEL}}》</span>
                            ({{t.start_at_time}})
                        </p>
                    </a-timeline-item>
                </a-timeline>
            </a-tab-pane>
        </a-tabs>
    </a-card>
</template>

<script>
    import { PageView } from '@/layouts'
    import {EduMixin} from "@/edus/mixin";
    import {ScheduleMixin} from "@/edus/ScheduleMixin";
    import moment from 'moment';
    export default {
        name: 'Index',
        components: {PageView, moment},
        mixins: [EduMixin, ScheduleMixin],
        data() {
            return {
                timetableList: {}
            };
        },
        methods: {

            __getTimeItemColor(index) {
                let todayStr   = this.__momentInstance().format('MDD');
                if( todayStr > index ) return 'gray';
                else if(todayStr == index) return 'green';
                else return 'blue';
            },

            getDateList(value) {
                let today = this.timetableList[value.format('MDD')] ? this.timetableList[value.format('MDD')] : false;
                if( today ) {
                    return today;
                }
                return [];
            },

            getMonthData(value) {

            },
            clickDateCallback(mmt) {
                console.log(mmt);
                return;
            },

            refreshMonthTimetable(mmt) {
                let data = {
                    _method: 'GET',
                    time: mmt ? mmt.format('YYYY-MM') : ''
                };
                this.$http.post('api/timetable', data).then(res => {
                    this.timetableList = res;
                });
            },
        },
        created() {
            this.refreshMonthTimetable();
        }
    };
</script>

<style lang="less" scoped>
    .events {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .events .ant-badge-status {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .notes-month {
        text-align: center;
        font-size: 28px;
    }
    .notes-month section {
        font-size: 28px;
    }
</style>
